<template>
  <div>
    <van-tabs v-model="active" color="#1989fa">
      <van-tab title="监控列表">
        <div style="margin-top: 20px">
          <van-tabs type="card" color="#1989fa">
            <van-tab title="全部" title-style="font-size: 12px">
              <van-search
                style="margin-top: 10px"
                v-model="value"
                placeholder="请输入企业名称搜索"
              />
              <div>
                <van-cell-group>
                  <van-cell title="标题">
                    <template #right-icon>
                      <van-switch v-model="checked1" size="24" />
                    </template>
                  </van-cell>
                  <van-cell title="标题">
                    <template #right-icon>
                      <van-switch v-model="checked2" size="24" />
                    </template>
                  </van-cell>
                  <van-cell title="标题">
                    <template #right-icon>
                      <van-switch v-model="checked3" size="24" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </div>
            </van-tab>
            <van-tab title="关注企业" title-style="font-size: 12px"></van-tab>
            <van-tab title="负责企业" title-style="font-size: 12px"></van-tab>
          </van-tabs>
        </div>
      </van-tab>
      <van-tab title="动态">
        <div>
          <van-cell-group>
            <div>
            <van-cell title="企业名称" :value="content">
            </van-cell>
            <div style="height: 40px; width: 100%">
              <p style="margin-left: 20px">内容</p>
            </div>
            <div style="margin-left: 20px">
              <van-tag type="primary">标签</van-tag>
            </div>
            <van-divider />
            </div>
            <div>
            <van-cell title="企业名称" :value="content">
            </van-cell>
            <div style="height: 40px; width: 100%">
              <p style="margin-left: 20px">内容</p>
            </div>
            <div style="margin-left: 20px">
              <van-tag type="primary">标签</van-tag>
            </div>
            <van-divider />
            </div>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  Search,
  Cell,
  CellGroup,
  Switch,
  Panel,
  Tag,
  Divider,
} from "vant";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Search);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Switch);
Vue.use(Panel);
Vue.use(Tag);
Vue.use(Divider);

export default {
  data() {
    return {
      active: 0,
      content: "xx分钟前",
      checked1: true,
      checked2: false,
      checked3: true,
    };
  },
};
</script>
